<script setup>
import { ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { ElIcon, ElMessageBox, ElTable, ElTree, ElTableColumn, ElPagination, ElInput, ElMessage } from 'element-plus';
import ActiveDepartment from './ActiveDepartment.vue';
import ActiveUserModule from './ActiveUserModule.vue';

const treeRef = ref(null);
const deptBoxShow = ref(false);
const tableLoading = ref(false);
const userBoxShow = ref(false);
const total = ref(100);
const btnChecked = ref('');
const checkedTreeItem = ref({});

const tableChecked = ref('');
const checkedTableItem = ref({});

const defaultProps = {
  id: 'id',
  children: 'children',
  label: 'label',
};
const treeData = ref([
  {
    id: '1',
    label: '三图科技',
    level: 1,
    children: [
      {
        id: '2',
        label: '图灵普惠',
        level: 2,
        children: [],
      },
    ],
  },
]);
const selectParams = ref({
  mobile: '',
  username: '',
  pageNumber: 1, //页数
  pageSize: 15, //数量
  organizationId: '',
});

const tableList = ref([
  {
    name: '图灵普惠',
    username: '菲',
    gender: 1,
    mobile: '15877480101',
    jobTitle: '研发',
    politicsStatus: 1,
    role: 1,
    createTime: '2024-1-4',
    id: '1',
  },
  {
    name: '图灵普惠',
    username: '泽',
    gender: 1,
    mobile: '15877480101',
    jobTitle: '研发',
    politicsStatus: 1,
    role: 1,
    createTime: '2024-1-4',
    id: '11',
  },
]);

// 页码
const handleCurrentChange = (val) => {
  selectParams.value.pageNumber = val;
};

// 筛选
const onChangeOption = () => {};

const handleCloseDeptBox = () => {
  deptBoxShow.value = false;
  btnChecked.value = '';
};

// 添加部门
const handleMoreTreeDept = (type) => {
  btnChecked.value = type;

  if (type == 'ADD' && !Object.keys(checkedTreeItem.value).length) {
    ElMessage.warning('请选择要给哪个部门下添加子部门!');

    return;
  }

  if (checkedTreeItem.value.level == 3) {
    ElMessage.warning('该层级无法添加下级部门!');

    return;
  }

  deptBoxShow.value = true;
};

// 用户操作
const handleOperate = (type, item) => {
  tableChecked.value = type;
  checkedTableItem.value = item;

  if (type == 'ADD' && !Object.keys(checkedTreeItem.value).length) {
    ElMessage.warning('请选择要在哪个部门下添加人员!');

    return;
  }

  if (['ADD', 'EDIT'].includes(type)) {
    userBoxShow.value = true;
  }

  if (type == 'RESET') {
    ElMessageBox.confirm(
      `确认重置密码！<br/> <p style="color:gray;"> 注：重置密码后，该用户将使用初始密码登录</p>`,
      '重置密码',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'message-delete',
        dangerouslyUseHTMLString: true,
      },
    )
      .then(async () => {})
      .catch((e) => {
        return e;
      });
  }

  if (type == 'DEL') {
    ElMessageBox.confirm(`确定要删除吗,删除后将无法恢复！`, '提示', {
      confirmButtonText: '删除',
      cancelButtonText: '再想一想',
      customClass: 'message-delete',
    })
      .then(async () => {})
      .catch((e) => {
        return e;
      });
  }
};

const handleCloseUserBox = () => {
  tableChecked.value = '';
  checkedTableItem.value = null;
  userBoxShow.value = false;
};

const handleNodeClick = (item) => {
  checkedTreeItem.value = item;
  selectParams.value.organizationId = item.id;
};

// 获取部门数据
const handleDepartmentEmit = (item, type) => {
  if (type == 'EDIT') {
    // console.log(item);
  } else {
    // console.log(item);
  }
};

// 获取人员数据
const handleGetUserBoxEmit = (item, type) => {
  if (type == 'EDIT') {
    // console.log(item);
  } else {
    // console.log(item, checkedTreeItem.value.id);
  }
};
</script>
<template>
  <div class="user_root">
    <div class="user_left_box">
      <header>
        <span>组织架构</span>
      </header>
      <div class="btn_add" @click="handleMoreTreeDept('ADD', {})">
        <ElIcon><Plus /></ElIcon> 添加部门
      </div>
      <div class="tree_box">
        <ElTree
          ref="treeRef"
          node-key="id"
          class="filter-tree"
          default-expand-all
          :data="treeData"
          :props="defaultProps"
          :highlight-current="true"
          @node-click="handleNodeClick"
        />
      </div>
    </div>
    <div class="user_right_box">
      <div class="select_">
        <div class="select_item_">
          <div class="select_item">
            <p>姓名</p>
            <ElInput v-model="selectParams.username" placeholder="请输入搜索" clearable @change="onChangeOption" />
          </div>
          <div class="select_item">
            <p>联系方式</p>
            <ElInput v-model="selectParams.mobile" placeholder="请输入搜索" clearable @change="onChangeOption" />
          </div>
        </div>
        <div class="add_btn" @click.stop="handleOperate('ADD', {})">+ 添加人员</div>
      </div>
      <div class="table_main">
        <ElTable
          v-loading="tableLoading"
          :data="tableList"
          :header-cell-style="{
            color: '#333333',
            background: '#F6FAF9',
            textAlign: 'center',
          }"
          :cell-style="{ 'text-align': 'center' }"
          class="table_border"
          :highlight-current-row="false"
        >
          <!-- <ElTableColumn type="selection" width="55" /> -->
          <ElTableColumn type="index" label="序号" width="75" />

          <ElTableColumn show-overflow-tooltip prop="name" label="部门">
            <template #default="scope">
              <span class="content_style" :title="scope.row.name">{{ scope.row.name }}</span>
            </template>
          </ElTableColumn>
          <ElTableColumn label="姓名" show-overflow-tooltip>
            <template #default="scope">
              <span class="content_style" :title="scope.row.username">{{ `${scope.row.username ?? '--'}` }}</span>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="createdDate" label="性别" show-overflow-tooltip width="80">
            <template #default="scope">
              <span :title="scope.row.sex" class="content_style">{{ scope.row.gender == 1 ? '女' : '男' }}</span>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="createdDate" label="联系方式" show-overflow-tooltip>
            <template #default="scope">
              <span :title="scope.row.mobile" class="content_style">{{ scope.row.mobile }}</span>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="createdDate" label="职位" show-overflow-tooltip>
            <template #default="scope">
              <span :title="scope.row.jobTitle" class="content_style">{{
                scope.row.jobTitle ? scope.row.jobTitle : '--'
              }}</span>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="createdDate" label="政治面貌" show-overflow-tooltip>
            <template #default="scope">
              <span :title="scope.row.politicsStatus" class="content_style">{{
                scope.row.politicsStatus == 1 ? '共青团员' : scope.row.politicsStatus == 2 ? '群众' : '党员'
              }}</span>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="createdDate" label="角色" show-overflow-tooltip>
            <template #default="scope">
              <p class="content_style">
                {{ scope.row.role == 1 ? '次管理员 ' : scope.row.role == 2 ? '普通用户' : '主管理员' }}
              </p>
            </template>
          </ElTableColumn>

          <ElTableColumn prop="createdDate" label="创建时间" show-overflow-tooltip>
            <template #default="scope">
              <span :title="scope.row.createTime" class="content_style">{{
                scope.row.createTime ? scope.row.createTime : '————'
              }}</span>
            </template>
          </ElTableColumn>

          <ElTableColumn label="操作" width="175">
            <template #default="scope">
              <div class="btn_box">
                <p style="color: #00ad93; cursor: pointer" @click="handleOperate('EDIT', scope.row)">编辑</p>
                <p style="color: #00ad93; cursor: pointer" @click="handleOperate('RESET', scope.row)">重置密码</p>
                <p style="color: #f65e5e; cursor: pointer" @click="handleOperate('DEL', scope.row)">删除</p>
              </div>
            </template>
          </ElTableColumn>
        </ElTable>
      </div>
      <div class="pagination_style">
        <ElPagination
          v-model:currentPage="selectParams.pageNumber"
          v-model:page-size="selectParams.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 添加/编--部门 -->
    <ActiveDepartment
      :dept-box-show="deptBoxShow"
      :btn-checked="btnChecked"
      :checked-tree-item="checkedTreeItem"
      @handle-close-dept-box="handleCloseDeptBox"
      @handle-department-emit="handleDepartmentEmit"
    />

    <!-- 添加/编辑--人员 -->
    <ActiveUserModule
      v-if="userBoxShow"
      :user-box-show="userBoxShow"
      :table-checked="tableChecked"
      :checked-table-item="checkedTableItem"
      :checked-tree-item="checkedTreeItem"
      @handle-close-user-box="handleCloseUserBox"
      @handle-get-user-box-emit="handleGetUserBoxEmit"
    />
  </div>
</template>

<style scoped lang="scss">
.user_root {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  // height: calc(100% - 72px);
  // padding: 20px;
  background: #f6faf9 !important;
  .user_left_box,
  .user_right_box {
    height: 100%;
    background-color: #ffffff;
    border-radius: 4px;
  }

  .user_left_box {
    width: 15%;
    margin-right: 10px;
    padding: 15px 7px;

    header {
      position: relative;

      &::before {
        content: '|';
        width: 4px;
        height: 30px;
        margin-right: 5px;
        color: #00ad93;
        font-size: 18px;
        background-color: #00ad93;
      }

      span {
        color: #333333;
        font-size: 18px;
        font-family: Source Han Sans CN;
      }
    }
    .btn_add {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 44px;
      margin-top: 19px;
      color: #00ad93;
      background: rgba(0, 173, 147, 0.1);
      border-radius: 4px;
      cursor: pointer;
      &:hover {
        background: rgba(0, 173, 147, 0.25);
      }
    }
    .tree_box {
      width: 100%;
      max-height: 667px;
      margin-top: 30px;
      overflow: auto;

      &::-webkit-scrollbar {
        display: none;
        width: 0 !important;
      }

      :deep(.el-tree-node__content) {
        height: 40px;
        padding-right: 9px;
        font-size: 18px;
      }
    }
  }
  .user_right_box {
    position: relative;
    width: 84%;
    padding: 15px 13px;
    .select_ {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .select_item_ {
        display: flex;
        align-items: center;
        .select_item {
          display: flex;
          align-items: center;
          margin-right: 12px;
          p {
            margin-right: 8px;
            color: #333333;
            font-size: 16px;
            font-family: Source Han Sans CN;
            white-space: nowrap;
          }

          :deep(.el-input__wrapper) {
            height: 40px;
          }
          :deep(.el-input) {
            width: 320px;
          }
        }
      }
      .add_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 144px;
        height: 40px;
        color: #ffffff;
        font-size: 18px;
        font-family: Source Han Sans CN;
        background: #00ad93;
        border-radius: 6px;
        cursor: pointer;
      }
    }

    .table_main {
      margin-top: 40px;
      :deep(.el-table tr) {
        color: #333333;
        font-size: 18px;
        font-family: Source Han Sans CN;
      }

      .btn_box {
        display: flex;
        p {
          white-space: nowrap;
          &:nth-child(2) {
            margin: 0 8px;
          }
        }
      }
    }
  }
}
</style>
